<html>
	<head>
		<meta charset="UTF-8">
		<title>threejs-example project demo: c-datacenter</title>
		<style>
			body { 
				margin: 0;
				background: black;
			}
			canvas { display: block; }

			.container{
				display: flex;
			}

			.container-3d{
				width: 100vw;
				height: 98vh;
				margin: 10px;
			}

			.right-list{
				position: absolute;
				right:20px;
			}

			.left-list {
				position: absolute;
				left:20px;
			}

			.board-list{
				margin-top:50px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
    			/* height: 100vh; */
			}

			.board{
				width: 20vw;
				height: 15vw;
				color:white;
				display: flex;
				flex-direction: column;
				background-image: url('./static/img//board.png');
				background-repeat: no-repeat;
				background-size: cover;
				margin: 10px;
			}

			.board .title{
				font-size:28px;
				background: #00f3ff33;
				margin: 6px 8px;
				margin-bottom: 0;
				text-indent: 16px;
				padding: 8px;
				box-shadow: 0px 0px 16px #00ffff96 inset;
			}

			.board .content{
				margin: 7px;
				margin-top: 0;
				width:calc(100% - 16px);
				height: calc(80% - 12px);
			}


		</style>
	</head>
	<body>
		<div class="container">

			<div class="board-list left-list">
				<div class="board">
					<div class="title">出入统计</div>
					<div id="line" class="content"></div>
				</div>
		
				<div class="board">
					<div class="title">分布图</div>
					<div id="heat-map" class="content"></div>
				</div>
		
				<div class="board">
					<div class="title">连接图</div>
					<div id="sankey" class="content"></div>
				</div>
			</div>

			<div class="container-3d">
				<div id="container-3d" style="width: 100%;height:100%;">
				</div>
			</div>


			<div class="board-list right-list">
				<div class="board">
					<div class="title">数量统计</div>
					<div id="parallel" class="content"></div>
				</div>
		
				<div class="board">
					<div class="title">数量统计</div>
					<div id="parallel-2" class="content"></div>
				</div>

				<div class="board">
					<div class="title">数量统计</div>
					<div id="parallel-3" class="content"></div>
				</div>

			</div>

		</div>




	</body>
	<script src="./static/js/add-github-icon.js"></script>

</html>